<script setup lang="ts">
import type { EmptyStateProps } from './types';
import { computed } from 'vue';
// import emptyImg from '@/assets/image/data_empty.png'
import { useI18n } from 'vue-i18n';

const props = defineProps<EmptyStateProps>();

const { t } = useI18n();
// 获取根元素的字体大小（100px对应的像素值）
function getRemValue() {
  // 获取根元素的字体大小，默认回退到16px
  return Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
}

// 计算转换后的图片尺寸
const computedImageSize = computed(() => {
  const remValue = getRemValue();
  return (props.imageSize ?? 120) * remValue;
});
</script>

<template>
  <div class="flex flex-col items-center justify-center">
    <el-empty :image-size="computedImageSize">
      <template #description>
        <div class="lst-gray3" :style="{ fontSize: '14px' }">
          {{ props.message ?? t('common.emptyImg.content') }}
        </div>
      </template>
    </el-empty>
  </div>
</template>

<style lang='scss' scoped>
:deep(.el-empty__description) {
  font-size: 14px;
}
</style>
